<template>
    <div class="tag">
        <Row type="flex" justify="space-between">
            <Col span="10" style="padding: 0px 8px;">
                <Card :bordered="false">
                    <p slot="title" v-if="editShow">更新标签</p>
                    <p slot="title" v-else>添加标签</p>
                    <Form ref="tagForm" :model="tag" label-position="top" :rules="ruleValidate">
                        <FormItem  label="标签名" required prop="tagName">
                            <Input v-model="tag.tagName" maxlength="10"></Input>
                        </FormItem>
                        <FormItem label="颜色" required prop="color">
                            <Input v-model="tag.color">
                                <Button slot="append" icon="ios-color-palette" @click="chooseColor"></Button>
                            </Input>
                            <Icon type="md-close-circle" class="close" v-if="colorShow" size="16" @click="onCancel"/>
                            <chromePicker class="chromePicker" v-model="colors" v-if="colorShow" @input="updateValue"/>
                        </FormItem>
                        <FormItem>
                            <Row type="flex" justify="space-between" class="code-row-bg">
                                <Col span="8">
                                    <Button type="primary" @click="handleSubmit()">保存</Button>
                                    <Button type="dashed" @click="handleBack()" v-if="editShow">返回添加</Button>
                                </Col>
                                <Col span="2">
                                    <Poptip
                                        confirm
                                        title="确定删除?"
                                        @on-ok="delOk"
                                        @on-cancel="delCancel"
                                        ok-text="确定"
                                        cancel-text="取消">
                                        <Button type="error" v-if="editShow" style="position: relative; right: 5px">删除</Button>
                                    </Poptip>
                                </Col>
                            </Row>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
            <Col span="14" style="padding: 0px 8px;">
                <Card :bordered="false">
                    <p slot="title">所有标签</p>
                    <Tag v-for="item in tagListData" :key="item.id" :color="item.color" size="medium" @click.native="tagClick(item)">{{ item.tagName }}</Tag>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import { Chrome } from 'vue-color'

export default {
    name: 'tag',
    methods: {
        // 颜色选择器选中颜色
        updateValue(color) {
            this.tag.color = color.hex
        },
        // 颜色选择器
        chooseColor() {
            this.colorShow = !this.colorShow
        },
        // 颜色选择器关闭
        onCancel() {
            this.colorShow = false
        },
        // 返回添加
        handleBack() {
            this.reset()
            this.editShow = false
        },
        // 表单提交
        async handleSubmit() {
            this.$refs.tagForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }
                const param = this.tag
                const res = await this.$api.tag(param)
                if (!res.success) {
                    this.$Message.error(res.message)
                    return false
                }
                this.$Message.success('添加成功!')
                await this.tagList()
            })
        },
        async tagClick(item) {
            this.$refs.tagForm.resetFields()
            this.tag = this._.cloneDeep(item)
            this.editShow = true
        },
        async tagList() {
            const res = await this.$api.tagList()
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.tagListData = this._.cloneDeep(res.data)
        },
        reset() {
            this.tag = {
                tagName: '',
                color: '#2d8cf0',
            }
            this.editShow = false
        },
        // 删除确定
        async delOk() {
            const id = this.tag.id
            const res = await this.$api.tagDelete(id)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.$Message.success('删除成功!')
            await this.tagList()
            this.reset()
        },
        // 删除取消
        delCancel() {
            console.log('取消')
        },
        // 初始化
        init() {
            // 标签列表
            this.tagList()
        },
    },
    mounted() {
        this.init()
    },
    components: {
        // 颜色选测器组件
        chromePicker: Chrome,
    },
    data() {
        return {
            // 颜色选择器展示标识
            colorShow: false,
            // 编辑展示标识
            editShow: false,
            // 标签数据
            tag: {
                tagName: '',
                color: '#2d8cf0',
            },
            // 标签数组
            tagListData: [],
            /* 颜色选择器 */
            colors: {
                color: '',
                hex: '#194d33',
                hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
                hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
                rgba: { r: 25, g: 77, b: 51, a: 1 },
                a: 1,
            },
            // 表单验证规则
            ruleValidate: {
                tagName: [
                    { required: true, message: '标签名不能为空', trigger: 'blur' },
                ],
                color: [
                    { required: true, message: '颜色不能为空', trigger: 'blur' },
                ],
            },
        }
    },
}
</script>

<style scoped>

.chromePicker{
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 1000;
}
.close{
    position: absolute;
    right: -7px;
    z-index: 1001;
    top: 40px;
    cursor: pointer;
}
.ivu-tag{
    margin-right: 10px;
    cursor: pointer;
}
</style>
